<template>
  <div class="warehouseList">
  	<!--查询条件组件-->
    <queryform
  		ref="queryform" 
  		:queryFormItems="queryFormItems"    
  		:defaultButton="defaultButton"
  		:operateItems="operateItems" 
  		@querySearch="querySearch"
  		@definedFunc="definedFunc">
  	</queryform> 
  	<!--table表格组件-->
    <tables
    	:dataSource="list"
    	:columns="columns"
    	:hasIndex="true"
    	@handleSelectionChange="handleSelectionChange">
  		<el-table-column slot="slotNameA" label="操作slotNameA">
  			<template slot-scope="scope">
  				<span>{{scope.row.unit}}</span><br />
  				<span>slotNameA</span>
  			</template>
  		</el-table-column>
  		<el-table-column slot="slotNameA" label="操作slotNameB">
  			<template slot-scope="scope">
  				<span>{{scope.row.productCustomCode}}</span><br />
  				<span>slotNameB</span>
  			</template>
  		</el-table-column>
    </tables>
    <!--分页查询组件-->
    <pagenations 
    	:currentPage="currentPage" 
    	:totalPage="totalPage" 
    	:totalItems="totalItems" 
    	:pageIndex="pageParams.pageIndex" 
    	:pageSize="pageParams.pageSize"
    	@pageChange="pageChange"
    	>
    </pagenations>
  </div>
</template>
<script>
	import tables from '@/components/Table';
	import pagenations from '@/components/PageNations';
	import queryform from '@/components/Search';
  import api from '@/api/stockProduct';
  import { validatRate } from '@/utils/validate';
  import { Message } from 'element-ui';
  export default {
  	components: {
  		tables,
  		pagenations,
  		queryform
  	},
    data() {
      return {
      	//queryFormItems：控制查询条件的查询输入部分，在数组中的下标对应查询条件的位置
      	queryFormItems: [
      		{
      			isInput: true,//输入类型为输入框（必须在第一个）
      			type: 'text',//input原生属性：text和textarea，默认text
      			label: '年龄',//form-item的label
      			value: 'age',//需要传给后台的对应字段
      			setDefaultValue:'',//为字段设置初始值
      			placeholder: '请输入年龄',//输入框为空时显示的内容，默认：请输入
      			disabled: false,//时候禁用默认：false
      			readonly: false,//是否只读，默认：false
      			maxlength: '',//输入的字符最大长度，默认为空
      			max: '',//输入的字符最大值，默认为空
      			min: '',//输入的字符最大值，默认为空
      			size: 'small',//输入框的大小。默认为small。可选值：medium / small / mini
      			itemWidth: 350,//form-item的长度，默认：350px
      			valueWidth:250,//input框的长度，默认：250px
      			labelWidth: 100//label长度，默认：100px
      		},{
      			isSelect: true,//输入类型为下拉选择框（必须在第一个）
      			label: '选      项',//form-item的label
      			value: 'option',//需要传给后台的对应字段
      			setDefaultValue: 1,//为字段设置初始值
      			placeholder: '请选择',//输入框为空时显示的内容，默认：请选择
      			loadingText: '加载中',//远程加载时显示的文字，默认：
      			noMatchText: '无匹配数据',//搜索条件无匹配时显示的文字，默认：无匹配数据
      			noDataText: '无数据',//选项为空时显示的文字，默认：无数据
      			multiple: false,//是否多选,默认：false
      			disabled: false,//是否禁用,默认：false
      			clearable: false,//是否可以清空选项,默认：false
      			filterable: false,//是否可搜索,默认：false
      			multipleLimit: 0,//多选时用户最多可以选择的项目数，为 0 则不限制
      			size: 'small',//输入框的大小。默认为small。可选值：medium / small / mini
      			itemWidth: 350,//form-item的长度，默认：350px
      			valueWidth:250,//input框的长度，默认：250px
      			labelWidth: 100,//label长度，默认：100px
      			list: []//下拉框option列表格式为[{label:'选项1'， value: 111},{label:'选项2'， value: 222}]
      		},{
      			isDateTime: true,//输入类型为单个时间（必须在第一个）
      			label: '选择日期',//form-item的label
      			value: 'time',//需要传给后台的对应字段
      			placeholder: '请选择日期',//输入框为空时显示的内容，默认：请选择日期
      			dateType:'date',//显示类型,默认：date
      			readonly: false,//是否只读，默认：false
      			align: 'left',//对齐方式，可选值：left, center, right，默认：left
      			size: 'small',//输入框的大小。默认为small。可选值：medium / small / mini
      			valueFormat: 'yyyy-MM-dd',//可选，绑定值的格式。不指定则绑定值为 Date 对象
      			defaultValue: '',//可选，选择器打开时默认显示的时间
      			format: 'yyyy-MM-dd',//
      			itemWidth: 350,//form-item的长度，默认：350px
      			valueWidth:250,//input框的长度，默认：250px
      			labelWidth: 100,//label长度，默认：100px
      			pickerOption:{//需要控制时间选择选择范围时定义
			      	disabledDate(time) {
			          return time.getTime() > Date.now();
			        }
			      }
      		},{
      			isStartTime: true,//输入类型为时间段的开始时间（必须在第一个）
      			label: '开始日期',//form-item的label
      			value: 'timeStart',//需要传给后台的对应字段
      			placeholder: '请选择日期',//输入框为空时显示的内容，默认：请选择日期
      			dateType:'date',//显示类型,默认：date
      			needPickerOptions: true,//是否需要控制时间选择的范围，需要pickerOption属性配合
      			limitBy: 'timeEnd',//控制时间范围依赖字段
      			readonly: false,//是否只读，默认：false
      			align: 'left',//对齐方式，可选值：left, center, right，默认：left
      			size: 'small',//输入框的大小。默认为small。可选值：medium / small / mini
      			valueFormat: 'yyyy-MM-dd',//可选，绑定值的格式。不指定则绑定值为 Date 对象
      			defaultValue: '',//可选，选择器打开时默认显示的时间
      			format: 'yyyy-MM-dd',//显示在输入框中的格式，默认：yyyy-MM-dd
      			itemWidth: 350,//form-item的长度，默认：350px
      			valueWidth:250,//input框的长度，默认：250px
      			labelWidth: 100,//label长度，默认：100px
      			pickerOption:{//需要控制时间选择选择范围时定义
			      	disabledDate(time) {
			          return time.getTime() > Date.now();
			        }
			      }
      		},{
      			isEndTime: true,//输入类型为时间段的结束时间
      			label: '结束日期',//form-item的label
      			value: 'timeEnd',//需要传给后台的对应字段
      			placeholder: '请选择日期',//输入框为空时显示的内容，默认：请选择日期
      			dateType:'date',//显示类型,默认：date
      			needPickerOptions: true,//是否需要控制时间选择的范围，需要pickerOption属性配合
      			limitBy: 'timeStart',//控制时间范围依赖字段
      			readonly: false,//是否只读，默认：false
      			align: 'left',//对齐方式，可选值：left, center, right，默认：left
      			size: 'small',//输入框的大小。默认为small。可选值：medium / small / mini
      			valueFormat: 'yyyy-MM-dd',//可选，绑定值的格式。不指定则绑定值为 Date 对象
      			defaultValue: '',//可选，选择器打开时默认显示的时间
      			format: 'yyyy-MM-dd',//
      			itemWidth: 350,//form-item的长度，默认：350px
      			valueWidth:250,//input框的长度，默认：250px
      			labelWidth: 100,//label长度，默认：100px
      			pickerOption:{//需要控制时间选择选择范围时定义
			      	disabledDate(time) {
			          return time.getTime() > Date.now();
			        }
			      }
      		}
      	],
      	//operateItems：需要自定义按钮时，在数组中的下标对应按钮的位置
      	operateItems: [
      		{
      			operateType: '查询',//按钮中显示的文字
      			operateFuncName: 'definedFunc',//点击按钮出发的函数名称
      			type:'',//按钮风格，默认：succes。可选值见element文档
      			size: 'small',//按钮大小，可选值：medium / small / mini，默认为small
      		}
      	],
      	//使用默认按钮时
      	defaultButton: {
      		searchIsShow: true,//是否显示查询按钮，默认：true
      		resetIsShow: true,//是否显示重置按钮，默认：true
      		searchText: '查询',//查询按钮显示文字，默认：查询
      		resetText: '全部',//重置按钮显示文字，默认：重置
      		searchType: 'success',//查询按钮风格，默认：success
      		resetType: '',//重置按钮风格，默认：success
      		searchSize: 'medium',//查询按钮大小，默认：small
      		resetSize: 'mini'//重置按钮大小，默认：small
      		
      	},
      	list: [], //商品列表
        searchParams: {},//查询条件
        pageParams: {},//页面查询条件
        defaultParams: {//预设条件
        	'queryType': 4,
        },
        currentPage:1,//当前页码
        totalPage:0,//总页数
        totalItems:0,//数据总条数
        params: {},//接口接收数据
        //table表格显示内容，在数组中的下标对应在表格中显示的列数
        columns: [
        	{
        		isShow: true,//是否显示
        		prop: 'productCustomCode',//对应的要显示的字段
        		label: '商品编号',//此列表头显示文字
        		filter: 'yui',//要是用的过滤器
        		filterParams: ''//过滤器要传的参数
        	},{
        		isPro: true,//是否自定义此列显示以及操作
        		slotName: 'slotNameA'//slot值
        	},{
        		isShow: true,//是否显示
        		prop: 'productName',//对应的要显示的字段
        		label: '商品名称',//此列表头显示文字
        		filter: 'yui',//要是用的过滤器
        		
        	},{
        		isShow: true,//是否显示
        		prop: 'productModel',//对应的要显示的字段
        		label: '型号',//此列表头显示文字
        		filter: 'yui',//要是用的过滤器
        		
        	},{
        		isShow: true,//是否显示
        		prop: 'unit',//对应的要显示的字段
        		label: '单位',//此列表头显示文字
        		filter: 'yui',//要是用的过滤器
        	},{
        		isPro: true,//是否自定义此列显示以及操作
        		slotName: 'slotNameB'//slot值
        	},
        ],
      }
    },
    
    methods: {
    	querySearch(v) {
    		this.params = {};
    		this.searchParams = v || {};
    		Object.assign( this.params, this.pageParams, this.defaultParams, this.searchParams)
    		this.searchList();
    	},
    	definedFunc(v) {
    		this.searchParams = v;
    		console.log(v)
    	},
    	
      /*库存查询列表*/
      searchList() {
        api.stockSearch(this.params).then(req => {
          if(req.isOk == true){
            this.list = req.value.items;
            /*分页数据*/
            this.currentPage = req.value.currentPage;
            this.totalPage = req.value.totalPage;
            this.totalItems = req.value.totalItems;
            this.pageParams.pageIndex = req.value.currentPage;
            this.pageParams.pageSize = req.value.pageSize;
          }else{
            Message.warning(req.err.message);
          }
        })
      },
      defaultSet() {
      	this.pageParams = {
	      	pageIndex: 1,
	        pageSize: 10,
	      };
      },
      pageChange(param) {
      	Object.assign( this.pageParams, {"pageIndex": param});
      	this.querySearch();
      },
      handleSelectionChange() {
      	
      },
      listSet() {
      	this.queryFormItems.map((v,k) => {
	    		if(v.value == 'option') {
	    			setTimeout(()=>{
	    				v.list = [
	      				{label: 'one', value:1},
	      				{label: 'two', value:2}
	      			];
	    			},3000)
	    		}
	    	})
      }
    },
    created() {
      this.defaultSet();
	    this.listSet();
      this.querySearch();
    },
  }
</script>
<style>
  .el-table td, .el-table th.is-leaf{
    text-align: center;
  }
</style>
<style scoped rel='stylesheet/scss' lang='scss'>
 
</style>
